<template>
    <!-- el-table显示数据,分页 -->
  
        <div class="patent">
              <div class="patent-tools">
                    <el-button type="warning" @click="selectById">按ID查询数据</el-button>
                </div>
              <!-- 表单显示部分 -->
              <el-table :data="patent" style="width: 100%">
                  <el-table-column fixed prop="id" width="150" />
                  <el-table-column prop="name" label="专利名称" width="180" />
                  <el-table-column prop="userId" label="发明人" width="100" />
                  <el-table-column prop="type" label="专利类型" width="120" />
                  <el-table-column prop="empowerTime" label="授权时间" width="250" />
                  <el-table-column prop="attachment" label="佐证材料" width="100" />
                  <el-table-column prop="address" label="申请地址" width="150" />
                  <el-table-column prop="patentNo" label="专利号" width="180" />
                </el-table>
              <el-pagination layout="prev, pager, next" :page-size="page.size" :total="page.total"
        @current-change="currentchange" />
          </div>
        <!-- 按id查询按钮点击后出现的表单 -->
        <el-dialog v-model="dialogFormVisibleById" title="专利查询">
              <el-form :model="adPatent">
                    <el-form-item label="请输入专利ID" :label-width="formLabelWidth">
                          <el-input v-model="searchText" placeholder="按专利ID查询，请输入专利ID" autocomplete="off" />
                      </el-form-item>
                </el-form>
  
              <template #footer>
                    <span class="dialog-footer">
                          <el-button @click="dialogFormVisibleById = false">Cancel</el-button>
                          <el-button type="primary" @click="getById(searchText)">查询
                            </el-button>
                      </span>
                </template>
          </el-dialog>
  </template>
    
  <script>
  import { defineComponent } from 'vue';
  import { patentPage, patentOne } from '../../http/patent';
  import { cloneDeep } from 'lodash-es';
  export default defineComponent({
    name:'ad-showPatent',
    data() {
      return {
        searchText: "",
        patent: [],
        patents: [],
        page: {
          total: 0,
          current: 1,
          size: 5
        },
        dialogFormVisible: false,
        dialogFormVisibleById: false,
        adPatent: {
          "address": "",
          "attachment": "",
          "empowerTime": "",
          "id": 0,
          "name": "",
          "patentNo": "",
          "type": "",
          "userId": 0
        },
        formLabelWidth: 120,
      }
    },
    mounted() {
      this.getPatentPage(1)
  
    },
    methods: {
      // 按page展示
      getPatentPage(current) {
        const data = {
          current: current,
          size: 5
        }
        patentPage(data).then(res => {
          const page = res.data.page;
          this.patent = page.records;
          this.page = page;
        }).catch(err => {
          console.log(err);
        })
      },
      currentchange(current) {
        // console.log(current);
        this.getPatentPage(current);
        this.page.current = current;//数据更新到目前显示的页面
      },
      selectById() {
        this.dialogFormVisibleById = true;
      },
      // 按ID查询
      getById(id) {
        this.patents = [];//新建一个数组
        const params = {
          id: id
        }
        patentOne(params).then(res => {
          console.log(res);
          this.dialogFormVisibleById = false;
          this.patents.push(res.data.patent);//在这个新数组里加入查到的信息
          const patent = this.patents;//将新数组赋值
          this.patent = patent;//显示
          ElMessage("查询成功")
        }).catch(err => {
          ElMessage("查询失败，请输入有效的id")
          console.log(err);
        })
      },
    }
  });
  </script>
  <style lang = "scss" scoped></style>
    